<template>
  <div class="commentitems">
    <div class="commentItem" v-for="(item, index) in commentChild" :key="index">
      <div class="userImg">
        <img
          :src="item.userinfo.user_img"
          alt=""
          v-if="item.userinfo && item.userinfo.user_img"
        />
        <img src="~images/head_img.png" alt="" v-else />
        <p>
          <span v-if="item.userinfo">{{ item.userinfo.name }}</span>
          <span v-else>无名</span>
          <span>{{ item.comment_date }}</span>
        </p>
      </div>
      <div class="commnetcontent">
        <div v-if="!temp">
          {{ item.comment_content
          }}<span class="publish" @click="postItemcomment(item.comment_id)"
            >回复</span
          >
        </div>
        <div v-else>
          回复
          <span style="color: #478ef0">{{ item.parent_user_info.name }}</span
          >:{{ item.comment_content
          }}<span class="publish" @click="postItemcomment(item.comment_id)"
            >回复</span
          >
        </div>
      </div>
      <commentchild-item
        :commentChild="item.child"
        :temp="true"
        @postChild="postChild"
      ></commentchild-item>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'commentchildItem',
    props: ['commentChild', 'temp'],
    methods: {
      postItemcomment(id) {
        this.$emit('postChild', id)
        this.$emit('postPublish', id)
      },
      postChild(id) {
        this.postItemcomment(id)
        this.$emit('postPublish', id)
      },
    },
  }
</script>

<style lang="stylus" scoped>
  .commentitems
    flex: 1

    .commentItem
      display: flex
      flex-direction: column

      .userImg
        display: flex

        img
          width: 35px
          height: 35px
          border-radius: 50%
          margin: 0 5px 10px 0

        p
          flex: 1
          color: #555
          font-size: 13px
          display: flex
          justify-content: space-between
          margin-bottom: 5px

      .commnetcontent
        margin-bottom: 10px
        position: relative

      div
        font-size: 13px

      .publish
        position: absolute
        color: #999999
        right: 15px
</style>